<template>
    <el-tooltip
      effect="dark"
      :placement="overturn ? 'bottom' : 'top'"
    >
    <template #content>
      <p>名称:<span>{{ showName(base) }}</span></p>
      <p>下行:<span>{{ base.down }}</span></p>
      <p>上行:<span>{{ base.up }}</span></p>
    </template>
      <div v-if="status" class="c-interfaces-item-small"
           :class="{'c-interfaces-item-overturn' : overturn ,
        'c-interfaces-item-run-small' : base.status === '1' ,
        'c-interfaces-item-abnormal-small' : base.status === '2' }">
        <div class="c-interfaces-value-small">
          <a @click="">
            ||||||
          </a>
        </div>
      </div>

      <div v-else class="c-interfaces-item"
        :class="{'c-interfaces-item-overturn' : overturn ,
        'c-interfaces-item-run' : base.status === '1' ,
        'c-interfaces-item-abnormal' : base.status === '2' }">
          <div class="c-interfaces-value">
            <a @click="">
              ||||||
            </a>
          </div>
      </div>
    </el-tooltip>
</template>
<script lang="ts">
  import { defineComponent, ref, watch } from 'vue';
  import { propTypes } from '/@/utils/propTypes';
  export default defineComponent({
    name: 'interfaceitem',
    props: {
      base:Object,
      status: propTypes.bool.def(false),
      overturn: propTypes.bool.def(false)
    },
    setup(props) {
      function showName(base){
        return base.status === '0' ? base.name + "(离线)" : base.name
      }

      return {showName}
    }
  })
</script>
<style lang="less">
.c-interfaces-item{
  float: left;
  margin : 1px;
  width: 28px;
  box-sizing: border-box;
  padding: 2px;
  background: #999;
  border:1px soild #000;
  display: flex;
}

.c-interfaces-item-small{
  float: left;
  margin : 1px;
  width: 14px;
  box-sizing: border-box;
  padding: 2px;
  background: #999;
  border:1px soild #000;
  display: flex;
}


.c-interfaces-item-overturn{
  transform:rotate(180deg);
}
.c-interfaces-value{
  margin: auto;
  width: 22px;
  height: 18px;
  background: #333;
  position: relative;
  font-size:6px;
  text-align: center;
  line-height: 18px;
  color:#999;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  &::before,&::after{
    content: " ";
    position: absolute;
    top:0;
    width: 4px;
    height: 3px;
    background: #999;
  }
  &::before{
    left:0;
  }
  &::after{
    right:0;
  }
}

.c-interfaces-value-small{
  margin: auto;
  width: 12px;
  height: 10px;
  background: #333;
  position: relative;
  font-size:6px;
  text-align: center;
  line-height: 18px;
  color:#999;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  &::before,&::after{
    content: " ";
    position: absolute;
    top:0;
    width: 4px;
    height: 3px;
    background: #999;
  }
  &::before{
    left:0;
  }
  &::after{
    right:0;
  }
}


.c-interfaces-item-run{
  .c-interfaces-value{
   animation:normals 2s infinite;
    &::before{
      border:1px solid #00ff22;
    }
  }
}
.c-interfaces-item-abnormal{
  .c-interfaces-value{
   animation:abnormal 2s infinite;
    &::before{
      border:1px solid #f00;
    }
  }
}

.c-interfaces-item-run-small{
  .c-interfaces-value-small{
    animation:normals 2s infinite;
    &::before{
      border:1px solid #00ff22;
    }
  }
}
.c-interfaces-item-abnormal-small{
  .c-interfaces-value-small{
    animation:abnormal 2s infinite;
    &::before{
      border:1px solid #f00;
    }
  }
}


@keyframes normals{
  0%{
    box-shadow: inset 0px 0px 3px 4px green;
  }
  50%{
    box-shadow: inset 0px 0px 6px 6px green;
  }
  100%{
    box-shadow: inset 0px 0px 3px 4px green;
  }
}
@keyframes abnormal{
  0%{
    box-shadow: inset 0px 0px 3px 1px red;
  }
  50%{
    box-shadow: inset 0px 0px 6px 2px red;
  }
  100%{
    box-shadow: inset 0px 0px 3px 1px red;
  }
}


a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: inherit;
  text-decoration: none;
}

a:visited {
  color: inherit;
  text-decoration: none;
}

a:active {
  color: inherit;
  text-decoration: none;
}
</style>
